<template>
    <div class="mg-tb">
        <!--抬头部分-->
        <div id="beset">
            <h4>{{photoinfo.title}}</h4>
            <p>
                <span>{{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                <span class="right">{{photoinfo.click}}次浏览</span>
            </p>
            <p class="line"></p>
        </div>
        <!--缩略图-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(item, index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
            </li>
        </ul>
        <!--描述-->
        <p class="info" v-html="photoinfo.content"></p>
        <!--引入评论-->
        <comment :id="id"></comment>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiphoto from '../../kits/common.js';
import comment from '../comment/commentlist.vue';
export default {
    components: {
        comment //注册组件
    },
    data() {
        return {
            id: 0,   //传入id
            photoinfo: {},   //详情数据         
            list: []    //存放缩略图
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getinfo();
        this.getimginfo();
    },
    methods: {
        getimginfo() {
            // 确定url
            var url = apiphoto.apiphoto+"/api/getthumimages/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                // 缩略图插件要求宽高，数据没有 只能自己手动添加
                body.message.forEach(function (element) {
                    var img = document.createElement('img');
                    img.src = element.src;
                    element.w = img.width;
                    element.h = img.height;
                });

                this.list = body.message;


            })
        },
        getinfo() {
            // 确定url
            var url = apiphoto.apiphoto + "/api/getimageInfo/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return
                }

                this.photoinfo = body.message[0];
            })
        }
    }
}
</script>

<style scoped>
.right {
    float: right;
}

#beset {
    color: #099;
    padding: 10px;
}

#beset p {
    color: #666;
}

#beset .line {
    height: 1px;
    width: 100%;
    background-color: #bbbeee;
}

.info {
    padding: 10px;
}

.mui-grid-view.mui-grid-9 {
    border-top: 0;
    border-left: 0;
    background: #fff;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-bottom: 0;
    border-right: 0;
}
</style>